<template>
  <a-input
    :disabled="disabled"
    allowClear
    :style="{ width }"
    :placeholder="t('component.icon.placeholder')"
    :class="prefixCls"
    v-model:value="currentSelect"
  >
    <template #addonAfter>
      <a-popover placement="bottomLeft" trigger="click" v-model="visible" :overlayClassName="`${prefixCls}-popover`">
        <template #title>
          <div class="flex justify-between">
            <a-input :placeholder="t('component.icon.search')" @change="debounceHandleSearchChange" allowClear />
          </div>
        </template>

        <template #content>
          <div v-if="getPaginationList.length">
            <ScrollContainer class="border border-t-0 border-solid">
              <ul class="flex flex-wrap px-2">
                <li
                  v-for="icon in getPaginationList"
                  :key="icon"
                  :class="currentSelect === icon ? 'border border-primary' : ''"
                  class="flex items-center justify-center p-2 mt-1 mr-1 border border-solid cursor-pointer w-1/8 hover:border-primary"
                  @click="handleClick(icon)"
                  :title="icon"
                >
                  <!-- <Icon :icon="icon" :prefix="prefix" /> -->
                  <SvgIcon v-if="isSvgMode" :name="icon" />
                  <Icon :icon="icon" v-else />
                </li>
              </ul>
            </ScrollContainer>
            <div class="flex items-center justify-center py-2" v-if="getTotal >= pageSize">
              <a-pagination
                showLessItems
                size="small"
                :pageSize="pageSize"
                :total="getTotal"
                @change="handlePageChange"
              />
            </div>
          </div>
          <template v-else
            ><div class="p-5"><a-empty /></div>
          </template>
        </template>

        <span class="flex items-center px-2 py-1 cursor-pointer" v-if="isSvgMode && currentSelect">
          <SvgIcon :name="currentSelect" />
        </span>
        <Icon :icon="currentSelect || 'ion:apps-outline'" class="px-2 py-1 cursor-pointer" v-else />
      </a-popover>
    </template>
  </a-input>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
// import { prefixCls } from '@/settings/designSetting'
export default defineComponent({
  name: 'IconPicker',
  inheritAttrs: false,
})
</script>
<script lang="ts" setup>
import { ref, watchEffect, watch, unref } from 'vue'
// import { useDesign } from '/@/hooks/web/useDesign';
import { ScrollContainer } from '/@/vbenComponents/Container'
import Icon from './Icon.vue'
import SvgIcon from './SvgIcon.vue'

import iconsData from '../data/icons.data'
import { propTypes } from '@/utils/propTypes'
import { usePagination } from '@/hooks/web/usePagination'
import { useDebounceFn } from '@vueuse/core'
import { useI18n } from '/@/hooks/web/useI18n'
import { useCopyToClipboard } from '@/hooks/web/useCopyToClipboard'
import { useMessage } from '/@/hooks/web/useMessage'
import svgIcons from 'virtual:svg-icons-names'
// import { assetsSvgs } from '@/use/useSvg'

function getIcons() {
  const data = iconsData as any
  const prefix: string = data?.prefix ?? ''
  let result: string[] = []
  if (prefix) {
    result = (data?.icons ?? []).map((item) => `${prefix}:${item}`)
  } else if (Array.isArray(iconsData)) {
    result = iconsData as string[]
  }
  return result
}

function getSvgIcons() {
  return svgIcons.map((icon) => icon.replace('icon-', ''))
}

const props = defineProps({
  value: propTypes.string,
  width: propTypes.string.def('100%'),
  pageSize: propTypes.number.def(140),
  copy: propTypes.bool.def(false),
  disabled: propTypes.bool.def(false),
  // mode: propTypes.oneOf<('svg' | 'iconify')[]>(['svg', 'iconify']).def('iconify'),
  mode: propTypes.string.def('iconify'),
})

const emit = defineEmits(['change', 'update:value'])

const isSvgMode = props.mode === 'svg'

const icons = isSvgMode ? getSvgIcons() : getIcons()

const currentSelect = ref('')
const visible = ref(false)
const currentList = ref(icons)

const { t } = useI18n()
// const { prefixCls } = useDesign('icon-picker');
const prefixCls = 'icon-picker'

const debounceHandleSearchChange = useDebounceFn(handleSearchChange, 100)
const { clipboardRef, isSuccessRef } = useCopyToClipboard(props.value)
const { createMessage } = useMessage()

const { getPaginationList, getTotal, setCurrentPage } = usePagination(currentList, props.pageSize)

watchEffect(() => {
  currentSelect.value = props.value
})

watch(
  () => currentSelect.value,
  (v) => {
    emit('update:value', v)
    return emit('change', v)
  }
)

function handlePageChange(page: number) {
  setCurrentPage(page)
}

function handleClick(icon: string) {
  currentSelect.value = icon
  if (props.copy) {
    clipboardRef.value = icon
    if (unref(isSuccessRef)) {
      createMessage.success(t('component.icon.copy'))
    }
  }
}

// // function handleSearchChange(e: ChangeEvent) {
function handleSearchChange(e: any) {
  console.log(e)
  const value = e.target.value
  if (!value) {
    setCurrentPage(1)
    currentList.value = icons
    return
  }
  currentList.value = icons.filter((item) => item.includes(value))
}
</script>
<style lang="less">
// @prefix-cls: ~'@{namespace}-icon-picker';

// .@{prefix-cls} {
.icon-picker {
  .ant-input-group-addon {
    padding: 0;
  }

  &-popover {
    width: 300px;

    .ant-popover-inner-content {
      padding: 0;
    }

    .scrollbar {
      height: 220px;
    }
  }
}

// &-popover {
//     width: 300px;

//     .ant-popover-inner-content {
//       padding: 0;
//     }

//     .scrollbar {
//       height: 220px;
//     }
//   }
</style>
